<template>
  <div class="box">
    <div class="zhu_zhuang_tu_box">
      <v-chart :options="options" autoresize/>
    </div>

    <span class="unit">单位: {{ unit }}</span>
  </div>
</template>

<script>
export default {
  name: "DuiDieTu",
  components: {},
  props: {
    value: {
      type: Object,
      default: () => {}
    },
    isShowUnit: true,
    isShowLegend: true,
    isShowXData: true
  },
  data() {
    return {
      unit: '',
      options: {
        title: {
          show: false,
        },
        grid:{
          x: 40,
          y: 60,
          x2: 30,
          y2: 60,
          borderWidth: 0
        },
        legend: {
          right: '2%',
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: {
          type: "category",
          data: ['牛', '羊', '马', '驴', '狗', '猪', '禽类'],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 14
            },
            // rotate: -45    // 旋转 类名
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          data: [],
          name: '',
          splitLine: {
            show: true
          },
          nameTextStyle: {
            color: "#fff",
            nameLocation: "start",
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 10
            }
          }
        },
        series: [
          {
            name: '春季',
            data: [213, 324, 535, 565, 324, 434, 55, 665],
            type: "bar",
            barGap: "0%",
            barWidth: 20,
            color: 'rgb(9, 117, 240)',
            emphasis: {
              focus: 'series'
            },

            itemStyle: {
              normal: {
                shadowColor: "rgba(0,160,221,1)",
                //模糊细数
                shadowBlur: 4,
                // 圆角
                barBorderRadius:[10, 10, 0, 0]
              }
            },
            // 标签
            label: {
              show: false,
              position: "top",
              distance: 10,
              fontSize: 16,
              color: '#fff',
              fontWeight: 500
            }
          },
          {
            data: [],
            type: "bar",
            barGap: "0%",
            barWidth: 17,
            color: '#80efa0',

            itemStyle: {
              normal: {
                shadowColor: "rgba(0,160,221,1)",
                //模糊细数
                shadowBlur: 4,
                // 圆角
                barBorderRadius:[10, 10, 0, 0]
              }
            },
            // 标签
            label: {
              show: false,
              position: "top",
              distance: 10,
              fontSize: 16,
              color: '#fff',
              fontWeight: 500
            }
          }
        ],
        // 提示
        tooltip: {
          trigger: "axis",
          show: true,
          textStyle: {
            type: 'cross'
          }
        }
      },
    };
  },
  watch: {
    value: {
      handler(val) {
        this.options.xAxis.data = val.x
        this.options.series[0].name = val.data1.name
        this.options.series[0].data = val.data1.data
        this.options.series[1].name = val.data2.name
        this.options.series[1].data = val.data2.data
        this.unit = val.unit
      },
      
      deep: true
    } 
  },
  mounted() {

  },
  methods: {
    
  }
};
</script>

<style scoped lang="less">
.echarts {
  width: 100%;
  height: 100%;
  overflow: hidden;
  // border: 1px solid #f00;
}
.box {
  width: 100%;
  height: 100%;
  position: relative;
}

.zhu_zhuang_tu_box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  // border: 1px solid #f00;
}

.unit { position: absolute; left: 10px; bottom: 5px; color: #fff; font-size: 14px; }

.s { color: #80efa0; }

</style>
